<template>
  <el-container>
    <el-main style="background-color: #cceeff;height: 100%;width: 100%">
      <el-container style="height: 100%">
        <el-header>
          <el-row>
            <el-col :span="5">
              <el-input clearable class="grid-content ep-bg-purple-light" v-model="questionId"
                        placeholder="请输入题目编号"
                        size="large"/>
            </el-col>
            <el-col :span="5" :push="1">
              <el-input clearable class="grid-content ep-bg-purple" v-model="questionName" placeholder="请输入题目名称"
                        size="large"/>
            </el-col>
            <el-col :span="5" :push="2">
              <el-input clearable class="grid-content ep-bg-purple-light" v-model="questionType"
                        placeholder="请输入题目类别" size="large"/>
            </el-col>
            <el-col :span="2" :push="3">
              <el-button type="primary" @click="load" size="large">查询</el-button>
            </el-col>
          </el-row>
        </el-header>
        <el-main style="background-color: rgba(255,255,255,0.7);">
          <el-table :data="tableData" style="width: 100%;" border stripe v-loading="loading">
            <el-table-column prop="questionId" label="题目编号" width="180"/>
            <el-table-column prop="questionName" label="标题" width="180"/>
            <el-table-column prop="questionType" label="类型" width="180"/>
            <el-table-column prop="questionAccept" label="解决" width="180"/>
            <el-table-column prop="questionSubmit" label="提交" width="180"/>
            <el-table-column prop="passingRate" label="通过率" width="180">
              <template #default="scope">
                <i class="el-icon-s-finance"></i>
                <span style="color: #4db3ff">{{ scope.row.passingRate }}%</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <!--          <el-button type="primary" size="mini" @click="buy(scope.row.id)">购买</el-button>-->
                <el-button link size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row.id)">
                  <template #reference>
                    <el-button link size="mini" type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer style="background-color: rgba(255,255,255,0.7);height: 45px">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-footer>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ProblemAdmin",
  data() {
    return {
      questionId: '',
      questionName: '',
      questionType: {},
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 10,
      tableData: [],
      loading: true
    }
  },
  created() {
    this.questionType = this.$route.query.qType;
    this.load()
  },
  methods: {
    load() {
      this.loading = true
      request.get("/subject", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          questionId: this.questionId,
          questionName: this.questionName,
          questionType: this.questionType,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false
      })
    },
    handleSizeChange(pageSize) { //改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) { //改变当前页码触发
      this.currentPage = pageNum
      this.load()
    }
  }
}
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>